import React, { Component } from 'react';
import { observer } from "mobx-react";
import { InputNumber } from 'antd';

@observer
class IntegrationOthers extends Component {
  render() {
    return (
      <div className="integration-others">
        <div className="mission-item">
          <div className="mission-name-others">Contribute:</div>
          <div className="mission-content read-item">
            <InputNumber
              className="h38 mb10 max-width"
              min={0}
              max={100}
              precision={0}
              placeholder="Integral per day"
              value={this.props.contributeIntegral}
              onChange={this.props.contributeIntegralOnChange}  />
            {
              this.props.contributeList.map((item, index) => {
                return (
                  <div className="flex-item" key={index}>
                    <span className="mr10">exceed</span>
                    <span className="mr10">
                      <InputNumber
                        className="h38 w170"
                        min={0}
                        max={100}
                        precision={0}
                        placeholder="Articles"
                        value={item.minLimit}
                        onChange={(value) => this.props.articlesOnChange(value, index)} />
                    </span>
                    <span className="mr10">could obtain</span>
                    <span className="mr10">
                      <InputNumber
                        className="h38 w170"
                        min={0}
                        max={100}
                        precision={0}
                        placeholder="Integral"
                        value={item.awards[0].amount}
                        onChange={(value) => this.props.articlesIntegrationOnChange(value, index)} />
                    </span>
                    <span className="mr10 delete-config" onClick={() => this.props.deleteContributeItem(index)}>Delete</span>
                  </div>
                )
              })
            }
            {
              this.props.contributeList.length < 10 ?
              <div className="add-item" onClick={this.props.addcontributeItem}>+ add</div>
              :
              null
            }
          </div>
        </div>
        <div className="mission-item">
          <div className="mission-name-others">Payment:</div>
          <div className="mission-content read-item">
            <InputNumber
              className="h38 mb10 max-width"
              min={0}
              max={100}
              precision={0}
              placeholder="Integral per day"
              value={this.props.paymentIntegral}
              onChange={this.props.paymentIntegralOnChange}  />
            {
              this.props.paymentList.map((item, index) => {
                return (
                  <div className="flex-item" key={index}>
                    <span className="mr10">exceed</span>
                    <span className="mr10">
                      <InputNumber
                        className="h38"
                        min={0}
                        max={100}
                        precision={0}
                        placeholder="payments"
                        value={item.minLimit}
                        onChange={(value) => this.props.paymentOnChange(value, index)} />
                    </span>
                    <span className="mr10">could obtain</span>
                    <span className="mr10">
                      <InputNumber
                        className="h38"
                        min={0}
                        max={100}
                        precision={0}
                        placeholder="Integral"
                        value={item.awards[0].amount}
                        onChange={(value) => this.props.paymentListIntegralOnChange(value, index)}  />
                    </span>
                    <span className="mr10 delete-config" onClick={() => this.props.deletePaymentItem(index)}>Delete</span>
                  </div>
                )
              })
            }
            {
              this.props.paymentList.length < 10 ?
              <div className="add-item" onClick={this.props.addPaymentItem}>+ add</div>
              :
              null
            }
          </div>
        </div>
      </div>
    )
  }
}

export default IntegrationOthers;
